<template>
    <view class="container">
        <!-- 顶部状态 -->
        <view class="" style="display: flex;margin: 20rpx;align-items: center;" >
            
			<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" v-if="[0,2,3].includes(orderDetails.status)" src="/static/images/yiwancheng.png" mode=""></image>
			<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" v-else src="/static/images/daiwancheng.png" mode=""></image>
			
            <view class="status-text" v-if="orderDetails.status == 1" >待付款</view>
            <view class="status-text" v-if="orderDetails.status == 2" >已付款</view>
            <view class="status-text" v-if="orderDetails.status == 3" >已退款</view>
            <view class="status-text" v-if="orderDetails.status == 4" >消费中</view>
        </view>
      <view class="status-tip" v-if="orderDetails.status == 1" style="display: flex;margin: 20rpx;" >请及时完成支付，感谢您的支持~</view>
      <view class="status-tip" v-else style="display: flex;margin: 20rpx;" >期待您的下次光临~</view>



        <!-- 商品信息 -->
        <view class="product-box">
            <view class="product-title">{{ orderDetails.tableNumber }}</view>
            <view class="product-info">
                <image class="product-img" :src="orderDetails.image" mode="aspectFill" />
                <view class="product-desc-box">
                    <view class="product-desc">{{ orderDetails.tableName }}</view>
                    <view class="product-time">消费时长：{{ orderDetails.saleHour }}小时{{ orderDetails.saleMinute }}分钟</view>
                </view>
                <view class="product-price">￥{{ orderDetails.rulesName }}</view>
            </view>
        </view>
        <!-- 订单信息 -->
        <view class="order-info-box">
            <view class="order-info-title">订单信息</view>
            <view class="order-info-row">
                <view>实付金额：</view>
                <view class="order-info-value">￥25.9</view>
            </view>
            <view class="order-info-row">
                <view>应收金额：</view>
                <view class="order-info-value">￥25.9</view>
            </view>
            <view class="order-info-row">
                <view>订单号：</view>
                <view class="order-info-value">123456564665645655</view>
            </view>
            <view class="order-info-row">
                <view>下单时间：</view>
                <view class="order-info-value">2025-01-25 20:22:15</view>
            </view>
            <view class="order-info-row">
                <view>会员值：</view>
                <view class="order-info-value">名字</view>
            </view>
            <view class="order-info-row">
                <view>会员余额：</view>
                <view class="order-info-value">￥52</view>
            </view>
            <view class="order-info-row">
                <view>消费时长：</view>
                <view class="order-info-value">2小时52分</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOrderDetails } from '@/api/order'

const orderDetails = ref({})

onLoad((options) => {
    console.log('options',JSON.parse(options.item))
    orderDetails.value = JSON.parse(options.item)
})
</script>

<style scoped>
.container {
    background: #f7f8fa;
    min-height: 100vh;
    padding: 20rpx 0;
}
.status-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 40rpx 0 20rpx 0;
    border-radius: 0 0 32rpx 32rpx;
    margin-bottom: 20rpx;
}
.status-icon {
    font-size: 48rpx;
    color: #4caf50;
    margin-bottom: 10rpx;
}
.status-text {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 6rpx;
}
.status-tip {
    color: #999;
    font-size: 24rpx;
}
.product-box {
    background: #fff;
    margin: 0 20rpx 20rpx 20rpx;
    border-radius: 20rpx;
    padding: 30rpx 24rpx 24rpx 24rpx;
}
.product-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 18rpx;
}
.product-info {
    display: flex;
    align-items: center;
}
.product-img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 12rpx;
    margin-right: 18rpx;
}
.product-desc-box {
    flex: 1;
}
.product-desc {
    font-size: 26rpx;
    color: #333;
    margin-bottom: 8rpx;
}
.product-time {
    font-size: 24rpx;
    color: #999;
}
.product-price {
    font-size: 28rpx;
    color: #ff6600;
    font-weight: bold;
    margin-left: 10rpx;
}
.order-info-box {
    background: #fff;
    margin: 0 20rpx;
    border-radius: 20rpx;
    padding: 30rpx 24rpx 24rpx 24rpx;
    margin-bottom: 20rpx;
}
.order-info-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 18rpx;
}
.order-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    color: #333;
    margin-bottom: 12rpx;
}
.order-info-value {
    color: #222;
    font-weight: 500;
}
</style>
